<template>
    <osc-navpage
            class="personal-root"
            title="配送单管理"
            height="100"
            titleColor="#000"
            backgroundColor="#eff3f2"
            leftItemSrc=""
            @naviBarLeftItemClick="naviBarLeftItemClick">

        <div class="content">

            <list class="scroller">
                <refresh class="refresh" @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
                    <text class="indicator">下拉刷新……</text>
                </refresh>

                <cell class="cell" v-for="transfer in lists">
                    <div class="panel" @click="onclick(transfer)">
                        <div class="content-head">
                            <div class="content-head-supply">
                                <text class="text">供应商:</text>
                                <text class="text">{{transfer.supply}}</text>
                            </div>
                            <div class="content-head-date">
                                <text class="text">到货日期:</text>
                                <text class="text">{{transfer.date}}</text>
                            </div>
                        </div>
                        <div class="content-bottom">
                            <text class="text">No:</text>
                            <text class="text">{{transfer.no}}</text>

                            <div v-if="transfer.status == '1'">
                                <text class="type-text">状态:已发货</text>
                            </div>
                            <div v-if="transfer.status == '0'">
                                <text class="type-text-nosend">状态:未发货</text>
                            </div>
                        </div>
                    </div>


                </cell>

            </list>
        </div>

        <!--     <div class="img-add" @click="addPurchaseInfo">
                <image class="img-top" src="https://olwr1lamu.qnssl.com/%E6%B7%BB%E5%8A%A0.png"></image>
            </div> -->

    </osc-navpage>
</template>

<script>
    import route from 'router/page'
    import mixins from 'mixins'

    const storage = weex.requireModule('storage')
    const modal = weex.requireModule('modal')
    const stream = weex.requireModule('stream')

    export default {
        data () {
            return {
                refreshing: false,
                lists: []
            }
        },
        mixins: [mixins],
        methods: {
            onrefresh (event) {
                modal.toast({message: '刷新中', duration: 1})
                this.refreshing = true
                stream.fetch({
                    method: 'GET',
                    type: 'json',
                    url: this.imgUrl.collect.computerUrl + 'getTransferInfoList'
                }, callback => {
                    this.lists = callback.data
                })
                setTimeout(() => {
                    this.refreshing = false
                }, 200)
            },
            onclick (transfer) {
                // 跳转到添加页面
                storage.setItem('id4TransferDetail', transfer.id, event => {

                })
                this.router.push({
                    page: this.routerPage.transferDetail
                })
            }
        },
        created () {
            stream.fetch({
                method: 'GET',
                type: 'json',
                url: this.imgUrl.collect.computerUrl + 'getTransferInfoList'
            }, callback => {
                this.lists = callback.data
            })
        }
    }
</script>

<style>
    .type-text-nosend {
        margin-top: 20px;
        margin-left: 100px;
        font-size: 25px;
        opacity: 0.7;
        color: #CC0000;
    }

    .type-text {
        margin-top: 20px;
        margin-left: 100px;
        font-size: 25px;
        opacity: 0.5;
    }

    .indicator {
        margin-left: 300px;
    }

    .content {
        position: absolute;
        height: 10000px;
    }

    .img-add {
        position: absolute;
        width: 130px;
        height: 130px;
        margin-top: 900px;
        margin-left: 600px;
    }

    .img-top {
        opacity: 0.7;
        width: 130px;
        height: 130px;
    }

    .indicator {
        color: #888888;
        font-size: 42px;
        text-align: center;
    }

    .panel {
        width: 750px;
        height: 200px;
        flex-direction: column;
        border-width: 2px;
        border-style: solid;
        border-color: #DDDDDD;
        background-color: #F5F5F5;
    }

    .content-head-supply {
        flex-direction: row;
    }

    .content-head-date {
        flex-direction: row;
        margin-left: 100px;
    }

    .content-head {
        margin-top: 25px;
        flex-direction: row;
        justify-content: flex-start;
    }

    .content-bottom {
        margin-top: 50px;
        flex-direction: row;
        justify-content: flex-start;
    }

    .text {
        margin-left: 10px;
        flex-direction: row;
        font-size: 40px;
        text-align: center;
        color: #41B883;
    }
</style>